<DocMatPaper Header="Paper & Elevation" />

<style>
    .demo-mat-elevation-container div {
        width: 200px;
        height: 100px;
        float: left;
        margin: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: monospace;
    }
</style>

<h5 class="mat-h5">Example</h5>

<DemoContainer Class="demo-mat-elevation-container">
    <Content>
        <MatPaper Elevation="0">Elevation 0</MatPaper>
        <MatPaper Elevation="1">Elevation 1</MatPaper>
        <MatPaper Elevation="2">Elevation 2</MatPaper>
        <MatPaper Elevation="3">Elevation 3</MatPaper>
        <MatPaper Elevation="4">Elevation 4</MatPaper>
        <MatPaper Elevation="5">Elevation 5</MatPaper>
        <MatPaper Elevation="6">Elevation 6</MatPaper>
        <MatPaper Elevation="7">Elevation 7</MatPaper>
        <MatPaper Elevation="8">Elevation 8</MatPaper>
        <MatPaper Elevation="9">Elevation 9</MatPaper>
        <MatPaper Elevation="10">Elevation 10</MatPaper>
        <MatPaper Elevation="11">Elevation 11</MatPaper>
        <MatPaper Elevation="12">Elevation 12</MatPaper>
        <MatPaper Elevation="13">Elevation 13</MatPaper>
        <MatPaper Elevation="14">Elevation 14</MatPaper>
        <MatPaper Elevation="15">Elevation 15</MatPaper>
        <MatPaper Elevation="16">Elevation 16</MatPaper>
        <MatPaper Elevation="17">Elevation 17</MatPaper>
        <MatPaper Elevation="18">Elevation 18</MatPaper>
        <MatPaper Elevation="19">Elevation 19</MatPaper>
        <MatPaper Elevation="20">Elevation 20</MatPaper>
        <MatPaper Elevation="21">Elevation 21</MatPaper>
        <MatPaper Elevation="22">Elevation 22</MatPaper>
        <MatPaper Elevation="23">Elevation 23</MatPaper>
        <MatPaper Elevation="24">Elevation 24</MatPaper>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatPaper Elevation=""0"">Elevation 0</MatPaper>
        <MatPaper Elevation=""1"">Elevation 1</MatPaper>
        <MatPaper Elevation=""2"">Elevation 2</MatPaper>
        <MatPaper Elevation=""3"">Elevation 3</MatPaper>
        <MatPaper Elevation=""4"">Elevation 4</MatPaper>
        <MatPaper Elevation=""5"">Elevation 5</MatPaper>
        <MatPaper Elevation=""6"">Elevation 6</MatPaper>
        <MatPaper Elevation=""7"">Elevation 7</MatPaper>
        <MatPaper Elevation=""8"">Elevation 8</MatPaper>
        <MatPaper Elevation=""9"">Elevation 9</MatPaper>
        <MatPaper Elevation=""10"">Elevation 10</MatPaper>
        <MatPaper Elevation=""11"">Elevation 11</MatPaper>
        <MatPaper Elevation=""12"">Elevation 12</MatPaper>
        <MatPaper Elevation=""13"">Elevation 13</MatPaper>
        <MatPaper Elevation=""14"">Elevation 14</MatPaper>
        <MatPaper Elevation=""15"">Elevation 15</MatPaper>
        <MatPaper Elevation=""16"">Elevation 16</MatPaper>
        <MatPaper Elevation=""17"">Elevation 17</MatPaper>
        <MatPaper Elevation=""18"">Elevation 18</MatPaper>
        <MatPaper Elevation=""19"">Elevation 19</MatPaper>
        <MatPaper Elevation=""20"">Elevation 20</MatPaper>
        <MatPaper Elevation=""21"">Elevation 21</MatPaper>
        <MatPaper Elevation=""22"">Elevation 22</MatPaper>
        <MatPaper Elevation=""23"">Elevation 23</MatPaper>
        <MatPaper Elevation=""24"">Elevation 24</MatPaper>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Example with different variants</h5>
<DemoContainer Class="demo-mat-elevation-container">
    <Content>
        <MatPaper Outlined="true">Outlined</MatPaper>
        <MatPaper Outlined="true" Rounded="true">Outlined & Rounded</MatPaper>
        <MatPaper Elevation="1" Rounded="true">Elevation 1 Rounded</MatPaper>
        <MatPaper Elevation="10" Rounded="true">Elevation 10 Rounded</MatPaper>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatPaper Outlined=""true"">Outlined</MatPaper>
        <MatPaper Outlined=""true"" Rounded=""true"">Outlined & Rounded</MatPaper>
        <MatPaper Elevation=""1"" Rounded=""true"">Elevation 1 Rounded</MatPaper>
        <MatPaper Elevation=""10"" Rounded=""true"">Elevation 10 Rounded</MatPaper>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Example using the css class</h5>
<DemoContainer Class="demo-mat-elevation-container">
    <Content>

        <div class="mat-elevation-z0">.mat-elevation-z0</div>
        <div class="mat-elevation-z1">.mat-elevation-z1</div>
        <div class="mat-elevation-z2">.mat-elevation-z2</div>
        <div class="mat-elevation-z3">.mat-elevation-z3</div>
        <div class="mat-elevation-z4">.mat-elevation-z4</div>
        <div class="mat-elevation-z5">.mat-elevation-z5</div>
        <div class="mat-elevation-z6">.mat-elevation-z6</div>
        <div class="mat-elevation-z7">.mat-elevation-z7</div>
        <div class="mat-elevation-z8">.mat-elevation-z8</div>
        <div class="mat-elevation-z9">.mat-elevation-z9</div>
        <div class="mat-elevation-z10">.mat-elevation-z10</div>
        <div class="mat-elevation-z11">.mat-elevation-z11</div>
        <div class="mat-elevation-z12">.mat-elevation-z12</div>
        <div class="mat-elevation-z13">.mat-elevation-z13</div>
        <div class="mat-elevation-z14">.mat-elevation-z14</div>
        <div class="mat-elevation-z15">.mat-elevation-z15</div>
        <div class="mat-elevation-z16">.mat-elevation-z16</div>
        <div class="mat-elevation-z17">.mat-elevation-z17</div>
        <div class="mat-elevation-z18">.mat-elevation-z18</div>
        <div class="mat-elevation-z19">.mat-elevation-z19</div>
        <div class="mat-elevation-z20">.mat-elevation-z20</div>
        <div class="mat-elevation-z21">.mat-elevation-z21</div>
        <div class="mat-elevation-z22">.mat-elevation-z22</div>
        <div class="mat-elevation-z23">.mat-elevation-z23</div>
        <div class="mat-elevation-z24">.mat-elevation-z24</div>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"

        <div class=""mat-elevation-z0"">.mat-elevation-z0</div>
        <div class=""mat-elevation-z1"">.mat-elevation-z1</div>
        <div class=""mat-elevation-z2"">.mat-elevation-z2</div>
        <div class=""mat-elevation-z3"">.mat-elevation-z3</div>
        <div class=""mat-elevation-z4"">.mat-elevation-z4</div>
        <div class=""mat-elevation-z5"">.mat-elevation-z5</div>
        <div class=""mat-elevation-z6"">.mat-elevation-z6</div>
        <div class=""mat-elevation-z7"">.mat-elevation-z7</div>
        <div class=""mat-elevation-z8"">.mat-elevation-z8</div>
        <div class=""mat-elevation-z9"">.mat-elevation-z9</div>
        <div class=""mat-elevation-z10"">.mat-elevation-z10</div>
        <div class=""mat-elevation-z11"">.mat-elevation-z11</div>
        <div class=""mat-elevation-z12"">.mat-elevation-z12</div>
        <div class=""mat-elevation-z13"">.mat-elevation-z13</div>
        <div class=""mat-elevation-z14"">.mat-elevation-z14</div>
        <div class=""mat-elevation-z15"">.mat-elevation-z15</div>
        <div class=""mat-elevation-z16"">.mat-elevation-z16</div>
        <div class=""mat-elevation-z17"">.mat-elevation-z17</div>
        <div class=""mat-elevation-z18"">.mat-elevation-z18</div>
        <div class=""mat-elevation-z19"">.mat-elevation-z19</div>
        <div class=""mat-elevation-z20"">.mat-elevation-z20</div>
        <div class=""mat-elevation-z21"">.mat-elevation-z21</div>
        <div class=""mat-elevation-z22"">.mat-elevation-z22</div>
        <div class=""mat-elevation-z23"">.mat-elevation-z23</div>
        <div class=""mat-elevation-z24"">.mat-elevation-z24</div>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

